{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highcharts Demos\n",
    "=========\n",
    "Column with drilldown: http://www.highcharts.com/demo/column-drilldown\n",
    "-------------------------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.highcharts.com/modules/drilldown.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;width:850px;height:400px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {&quot;text&quot;: &quot;Click the columns to view versions. Source: &lt;a href=\\&quot;http://netmarketshare.com\\&quot;&gt;netmarketshare.com&lt;/a&gt;.&quot;}, &quot;xAxis&quot;: {&quot;type&quot;: &quot;category&quot;}, &quot;title&quot;: {&quot;text&quot;: &quot;Browser market shares. January, 2015 to May, 2015&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {&quot;title&quot;: {&quot;text&quot;: &quot;Total percent market share&quot;}}, &quot;chart&quot;: {&quot;width&quot;: 850, &quot;renderTo&quot;: &quot;container&quot;, &quot;type&quot;: &quot;column&quot;, &quot;height&quot;: 400}, &quot;tooltip&quot;: {&quot;headerFormat&quot;: &quot;&lt;span style=\\&quot;font-size:11px\\&quot;&gt;{series.name}&lt;/span&gt;&lt;br&gt;&quot;, &quot;pointFormat&quot;: &quot;&lt;span style=\\&quot;color:{point.color}\\&quot;&gt;{point.name}&lt;/span&gt;: &lt;b&gt;{point.y:.2f}%&lt;/b&gt; of total&lt;br/&gt;&quot;}, &quot;plotOptions&quot;: {&quot;series&quot;: {&quot;borderWidth&quot;: 0, &quot;dataLabels&quot;: {&quot;enabled&quot;: true, &quot;format&quot;: &quot;{point.y:.1f}%&quot;}}}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {&quot;enabled&quot;: false}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;colorByPoint&quot;: true, &quot;data&quot;: [{&quot;y&quot;: 56.33, &quot;drilldown&quot;: &quot;Microsoft Internet Explorer&quot;, &quot;name&quot;: &quot;Microsoft Internet Explorer&quot;}, {&quot;y&quot;: 24.030000000000005, &quot;drilldown&quot;: &quot;Chrome&quot;, &quot;name&quot;: &quot;Chrome&quot;}, {&quot;y&quot;: 10.38, &quot;drilldown&quot;: &quot;Firefox&quot;, &quot;name&quot;: &quot;Firefox&quot;}, {&quot;y&quot;: 4.77, &quot;drilldown&quot;: &quot;Safari&quot;, &quot;name&quot;: &quot;Safari&quot;}, {&quot;y&quot;: 0.9100000000000001, &quot;drilldown&quot;: &quot;Opera&quot;, &quot;name&quot;: &quot;Opera&quot;}, {&quot;y&quot;: 0.2, &quot;drilldown&quot;: null, &quot;name&quot;: &quot;Proprietary or Undetectable&quot;}], &quot;type&quot;: &quot;column&quot;, &quot;name&quot;: &quot;Brands&quot;}]\n",
       "            option.series = data;\n",
       "\n",
       "            var drilldowndata = [{&quot;name&quot;: &quot;Microsoft Internet Explorer&quot;, &quot;type&quot;: &quot;column&quot;, &quot;data&quot;: [[&quot;v11.0&quot;, 24.13], [&quot;v8.0&quot;, 17.2], [&quot;v9.0&quot;, 8.11], [&quot;v10.0&quot;, 5.33], [&quot;v6.0&quot;, 1.06], [&quot;v7.0&quot;, 0.5]], &quot;id&quot;: &quot;Microsoft Internet Explorer&quot;}, {&quot;name&quot;: &quot;Chrome&quot;, &quot;type&quot;: &quot;column&quot;, &quot;data&quot;: [[&quot;v40.0&quot;, 5], [&quot;v41.0&quot;, 4.32], [&quot;v42.0&quot;, 3.68], [&quot;v39.0&quot;, 2.96], [&quot;v36.0&quot;, 2.53], [&quot;v43.0&quot;, 1.45], [&quot;v31.0&quot;, 1.24], [&quot;v35.0&quot;, 0.85], [&quot;v38.0&quot;, 0.6], [&quot;v32.0&quot;, 0.55], [&quot;v37.0&quot;, 0.38], [&quot;v33.0&quot;, 0.19], [&quot;v34.0&quot;, 0.14], [&quot;v30.0&quot;, 0.14]], &quot;id&quot;: &quot;Chrome&quot;}, {&quot;name&quot;: &quot;Firefox&quot;, &quot;type&quot;: &quot;column&quot;, &quot;data&quot;: [[&quot;v35&quot;, 2.76], [&quot;v36&quot;, 2.32], [&quot;v37&quot;, 2.31], [&quot;v34&quot;, 1.27], [&quot;v38&quot;, 1.02], [&quot;v31&quot;, 0.33], [&quot;v33&quot;, 0.22], [&quot;v32&quot;, 0.15]], &quot;id&quot;: &quot;Firefox&quot;}, {&quot;name&quot;: &quot;Safari&quot;, &quot;type&quot;: &quot;column&quot;, &quot;data&quot;: [[&quot;v8.0&quot;, 2.56], [&quot;v7.1&quot;, 0.77], [&quot;v5.1&quot;, 0.42], [&quot;v5.0&quot;, 0.3], [&quot;v6.1&quot;, 0.29], [&quot;v7.0&quot;, 0.26], [&quot;v6.2&quot;, 0.17]], &quot;id&quot;: &quot;Safari&quot;}, {&quot;name&quot;: &quot;Opera&quot;, &quot;type&quot;: &quot;column&quot;, &quot;data&quot;: [[&quot;v12.x&quot;, 0.34], [&quot;v28&quot;, 0.24], [&quot;v27&quot;, 0.17], [&quot;v29&quot;, 0.16]], &quot;id&quot;: &quot;Opera&quot;}];\n",
       "            option.drilldown.series = drilldowndata;\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=400 width=850></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7fcd64241450>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highchart\n",
    "H = Highchart(width=850, height=400)\n",
    "\n",
    "\"\"\"\n",
    "Drilldown chart can be created using add_drilldown_data_set method: \n",
    "\n",
    "add_drilldown_data_set(data, series_type, id, **kwargs):\n",
    "id is the drilldown parameter in upperlevel dataset (Ex. drilldown parameters in data)\n",
    "drilldown dataset is constructed similar to dataset for other charts\n",
    "\"\"\"\n",
    "\n",
    "data = [{\n",
    "            'name': \"Microsoft Internet Explorer\",\n",
    "            'y': 56.33,\n",
    "            'drilldown': \"Microsoft Internet Explorer\"\n",
    "        }, {\n",
    "            'name': \"Chrome\",\n",
    "            'y': 24.030000000000005,\n",
    "            'drilldown': \"Chrome\"\n",
    "        }, {\n",
    "            'name': \"Firefox\",\n",
    "            'y': 10.38,\n",
    "            'drilldown': \"Firefox\"\n",
    "        }, {\n",
    "            'name': \"Safari\",\n",
    "            'y': 4.77,\n",
    "            'drilldown': \"Safari\"\n",
    "        }, {\n",
    "            'name': \"Opera\",\n",
    "            'y': 0.9100000000000001,\n",
    "            'drilldown': \"Opera\"\n",
    "        }, {\n",
    "            'name': \"Proprietary or Undetectable\",\n",
    "            'y': 0.2,\n",
    "            'drilldown': None\n",
    "        }]\n",
    "\n",
    "data_1 = [\n",
    "    [\"v11.0\", 24.13],\n",
    "    [\"v8.0\", 17.2],\n",
    "    [\"v9.0\", 8.11],\n",
    "    [\"v10.0\", 5.33],\n",
    "    [\"v6.0\", 1.06],\n",
    "    [\"v7.0\", 0.5]\n",
    "]\n",
    "\n",
    "data_2 = [\n",
    "    [\"v40.0\", 5],\n",
    "    [\"v41.0\", 4.32],\n",
    "    [\"v42.0\", 3.68],\n",
    "    [\"v39.0\", 2.96],\n",
    "    [\"v36.0\", 2.53],\n",
    "    [\"v43.0\", 1.45],\n",
    "    [\"v31.0\", 1.24],\n",
    "    [\"v35.0\", 0.85],\n",
    "    [\"v38.0\", 0.6],\n",
    "    [\"v32.0\", 0.55],\n",
    "    [\"v37.0\", 0.38],\n",
    "    [\"v33.0\", 0.19],\n",
    "    [\"v34.0\", 0.14],\n",
    "    [\"v30.0\", 0.14]      \n",
    "]\n",
    "\n",
    "data_3 = [\n",
    "    [\"v35\", 2.76],\n",
    "    [\"v36\", 2.32],\n",
    "    [\"v37\", 2.31],\n",
    "    [\"v34\", 1.27],\n",
    "    [\"v38\", 1.02],\n",
    "    [\"v31\", 0.33],\n",
    "    [\"v33\", 0.22],\n",
    "    [\"v32\", 0.15]\n",
    "]\n",
    "\n",
    "data_4 = [\n",
    "    [\"v8.0\", 2.56],\n",
    "    [\"v7.1\", 0.77],\n",
    "    [\"v5.1\", 0.42],\n",
    "    [\"v5.0\", 0.3],\n",
    "    [\"v6.1\", 0.29],\n",
    "    [\"v7.0\", 0.26],\n",
    "    [\"v6.2\", 0.17]\n",
    "]\n",
    "\n",
    "data_5 = [\n",
    "    [\"v12.x\", 0.34],\n",
    "    [\"v28\", 0.24],\n",
    "    [\"v27\", 0.17],\n",
    "    [\"v29\", 0.16]\n",
    "]\n",
    "\n",
    "options = {\n",
    "    'chart': {\n",
    "        'type': 'column'\n",
    "    },\n",
    "    'title': {\n",
    "        'text': 'Browser market shares. January, 2015 to May, 2015'\n",
    "    },\n",
    "    'subtitle': {\n",
    "        'text': 'Click the columns to view versions. Source: <a href=\"http://netmarketshare.com\">netmarketshare.com</a>.'\n",
    "    },\n",
    "    'xAxis': {\n",
    "        'type': 'category'\n",
    "    },\n",
    "    'yAxis': {\n",
    "        'title': {\n",
    "            'text': 'Total percent market share'\n",
    "        }\n",
    "\n",
    "    },\n",
    "    'legend': {\n",
    "        'enabled': False\n",
    "    },\n",
    "    'plotOptions': {\n",
    "        'series': {\n",
    "            'borderWidth': 0,\n",
    "            'dataLabels': {\n",
    "                'enabled': True,\n",
    "                'format': '{point.y:.1f}%'\n",
    "            }\n",
    "        }\n",
    "    },\n",
    "\n",
    "    'tooltip': {\n",
    "        'headerFormat': '<span style=\"font-size:11px\">{series.name}</span><br>',\n",
    "        'pointFormat': '<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'\n",
    "    }, \n",
    "    \n",
    "}\n",
    "   \n",
    "H.set_dict_options(options)\n",
    "\n",
    "H.add_data_set(data, 'column', \"Brands\", colorByPoint= True)\n",
    "H.add_drilldown_data_set(data_1, 'column', 'Microsoft Internet Explorer', name='Microsoft Internet Explorer' )\n",
    "H.add_drilldown_data_set(data_2, 'column', 'Chrome', name='Chrome')\n",
    "H.add_drilldown_data_set(data_3, 'column', 'Firefox', name='Firefox')\n",
    "H.add_drilldown_data_set(data_4, 'column', 'Safari', name='Safari')\n",
    "H.add_drilldown_data_set(data_5, 'column', 'Opera', name='Opera')\n",
    "\n",
    "H"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
